import React, { useState, useEffect } from 'react';
import { Layout, Breadcrumb, List,Button,message,Spin } from 'antd';
import Api from '../../../util/apiUrl';
import style from './index.module.css';
const { Content } = Layout;
const Guestbook = (props) => {
    console.log('Guestbook props',props)
    const [dataList, setDataList] = useState([]);
    const [isLoading,setIsLoading] = useState(false)
    
  useEffect(() => {
    getDataList();
  }, []);

  // 获取留言列表
  const getDataList = () => {
    Api.guestbook()
      .then((res) => {
        console.log('留言列表', res);
        setDataList(res.data.reverse());
      })
      .catch((err) => {
        console.log('获取列表失败', err);
      });
  };
  
//   删除留言
const deleteGuestbook=(id)=>{
    setIsLoading(true)
    Api.deleteGuestbook(id).then(res=>{
        console.log('删除成功',res)
        setIsLoading(false)
        message.success('删除成功');
        let newDataList = [...dataList]
        newDataList.splice(dataList.findIndex(i=>i.id==id),1)
        setDataList(newDataList)
    }).catch(err=>{
        console.log('删除失败',err)
        setIsLoading(false)
        message.error('添加文章失败');
    })
}
    return (
        <>
        {isLoading ? (
          <div className={style.container}>
            <Spin size="large" className={style.spin} />
          </div>
        ) : null}
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>留言</Breadcrumb.Item>
          </Breadcrumb>
          <Content
            className="site-layout-background"
            style={{
              margin: 0,
              minHeight: 280,
            }}
          >
            {/* <RedactContent isAlert={true} /> */}
            <List
              size="large"
              //   header={<div>Header</div>}
              //   footer={<div>Footer</div>}
              bordered
              dataSource={dataList}
              renderItem={(item) => (
                <List.Item>
                  <div className={style.item}>
                    <p>{item.name}
                      <span>留言时间 : {item.updateTime}</span></p>
                    {/* <p> */}
                      {/* <span>修改时间 : {item.alterTime}</span>
                      <span>是否推荐 : {item.isRecommend == 1 ? '是' : '否'}</span>
                      <span>是否推荐 : {item.isRecommend == 1 ? '是' : '否'}</span>
                      <span>文章类型 : {item.skillTypeId}</span>
                      <span>阅读人数 : {item.people}</span> */}
                    {/* </p> */}
                    <p>{item.content}</p>
                    <div>
                      {/* <Button type="primary" onClick={()=>{props.history.push('/admin/alterArticle/'+item.id)}}>修改</Button>&nbsp;&nbsp; */}
                      <Button type="primary" danger onClick={()=>{deleteGuestbook(item.id)}}>删除</Button>
                    </div>
                  </div>
                </List.Item>
              )}
            />
          </Content>
        </>
    )
}

export default Guestbook